<template>
    <div class="qilin-QilinSearch">
        <div class="header">基本使用</div>
        <QilinSearch v-model:searchConfig="searchConfig" ref="searchConfigRef">
            <template v-slot:production="slotData">
                <el-input
                    v-model="searchConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入代表作"
                ></el-input>
            </template>
        </QilinSearch>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable>
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 获取搜索表单配置项ref
const searchConfigRef=ref(null);


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinSearch v-model:searchConfig="searchConfig" ref="searchConfigRef">
            <template v-slot:production="slotData">
                <el-input
                    v-model="searchConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入代表作"
                ></el-input>
            </template>
        </QilinSearch>
        // --js部分
        // 获取搜索表单配置项ref
        const searchConfigRef=ref(null);
        const searchConfig=reactive({
            elFormConfig:{
                labelPosition:"right",
                labelSuffix:"：",
                size:"default"
            },
            itemConfig:[
                {
                    labelName:"姓名",
                    dataName:"name",
                    type:"input",
                    inputType:"text"
                },
                {
                    labelName:"身份",
                    dataName:"identity",
                    type:"select",
                    dataListName:"identityList",
                    multiple:true,
                    filterable:false,
                    collapseTags:true
                },
                {
                    labelName:"出生日期",
                    dataName:"birthday",
                    type:"date",
                    dateType:"date",
                    format:"YYYY-MM-DD",
                    valueFormat:"YYYY-MM-DD",
                    width:160
                },
                {
                    labelName:"代表作",
                    dataName:"production",
                    type:"slot",
                    slotName:"production"
                }
            ],
            moreConfig:{
                isShowMore:true
            },
            moreItemConfig:[
                {
                    labelName:"工作区间",
                    dataName:"workInterval",
                    type:"date",
                    dateType:"daterange",
                    format:"YYYY-MM-DD",
                    valueFormat:"YYYY-MM-DD"
                },
                {
                    labelName:"参与项目",
                    dataName:"projectName",
                    type:"select",
                    dataListName:"projectNameList"
                },
                {
                    labelName:"项目所属",
                    dataName:"projectOwn",
                    type:"cascader",
                    dataListName:"projectOwnList",
                    cascaderProps:{
                        label:"name",
                        value:"id",
                        children:"children"
                    }
                }
            ],
            selectLists:{
                identityList:[
                    {
                        label:"学生",
                        value:0
                    },
                    {
                        label:"程序员",
                        value:1
                    },
                    {
                        label:"作者",
                        value:2
                    },
                    {
                        label:"打工人",
                        value:3
                    }
                ],
                projectNameList:[
                    {
                        label:"看守所、戒毒所、拘留所等项目",
                        value:0
                    },
                    {
                        label:"SDP零信任项目",
                        value:1
                    },
                    {
                        label:"动态应用安全防护系统BSG",
                        value:2
                    },
                    {
                        label:"云上贵州项目",
                        value:3
                    },
                    {
                        label:"红花街道h5项目",
                        value:4
                    },
                    {
                        label:"温州市党政机关信息化项目",
                        value:5
                    },
                    {
                        label:"U创办公管理系统",
                        value:6
                    },
                    {
                        label:"U创办公小程序项目",
                        value:7
                    }
                ],
                projectOwnList:[
                    {
                        name:"南京冠霆智能科技有限公司",
                        id:1,
                        children:[
                            {
                                name:"看守所项目",
                                id:11
                            },
                            {
                                name:"拘留所项目",
                                id:12
                            },
                            {
                                name:"戒毒所项目",
                                id:13
                            },
                            {
                                name:"安康医院项目",
                                id:14
                            }
                        ]
                    },
                    {
                        name:"亚信安全有限公司",
                        id:2,
                        children:[
                            {
                                name:"亚信智网有限公司",
                                id:21,
                                children:[
                                    {
                                        name:"SDP零信任项目",
                                        id:211
                                    },
                                    {
                                        name:"动态应用安全防护系统BSG",
                                        id:212
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name:"苏软科技（南京）有限公司",
                        id:3,
                        children:[
                            {
                                name:"云上贵州项目",
                                id:31
                            },
                            {
                                name:"红花街道h5项目",
                                id:32
                            },
                            {
                                name:"温州市党政机关信息化项目",
                                id:33
                            }
                        ]
                    },
                    {
                        name:"南京联创智慧城市科技有限公司",
                        id:4,
                        children:[
                            {
                                name:"U创办公管理系统",
                                id:41
                            },
                            {
                                name:"U创办公小程序",
                                id:42
                            }
                        ]
                    }
                ]
            },
            buttonConfig:[
                {
                    btnName:"查询",
                    btnType:"primary",
                    btnSize:"default",
                    formRefName:searchConfigRef,
                    btnClick:(formRef)=>{
                        // console.log(formRef);
                        console.log(searchConfig.submitData);
                    }
                },
                {
                    btnName:"重置",
                    btnType:"default",
                    btnSize:"default",
                    formRefName:searchConfigRef,
                    btnClick:(formRef)=>{
                        console.log(formRef);
                        formRef.resetSearchData();
                    }
                }
            ],
            submitData:{
                name:"",
                identity:"",
                birthday:"",
                production:"",
                workInterval:"",
                projectName:"",
                projectOwn:""
            }
        });
    `
});


/*
    逻辑脚本代码区域
*/
const searchConfig=reactive({
    elFormConfig:{
        labelPOsition:"right",
        labelSuffix:"：",
        size:"default"
    },
    itemConfig:[
        {
            labelName:"姓名",
            dataName:"name",
            type:"input",
            inputType:"text"
        },
        {
            labelName:"身份",
            dataName:"identity",
            type:"select",
            dataListName:"identityList",
            multiple:true,
            filterable:false,
            collapseTags:true
        },
        {
            labelName:"出生日期",
            dataName:"birthday",
            type:"date",
            dateType:"date",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            width:160
        },
        {
            labelName:"代表作",
            dataName:"production",
            type:"slot",
            slotName:"production"
        }
    ],
    moreConfig:{
        isShowMore:true
    },
    moreItemConfig:[
        {
            labelName:"工作区间",
            dataName:"workInterval",
            type:"date",
            dateType:"daterange",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD"
        },
        {
            labelName:"参与项目",
            dataName:"projectName",
            type:"select",
            dataListName:"projectNameList"
        },
        {
            labelName:"项目所属",
            dataName:"projectOwn",
            type:"cascader",
            dataListName:"projectOwnList",
            cascaderProps:{
                label:"name",
                value:"id",
                children:"children"
            }
        }
    ],
    selectLists:{
        identityList:[
            {
                label:"学生",
                value:0
            },
            {
                label:"程序员",
                value:1
            },
            {
                label:"作者",
                value:2
            },
            {
                label:"打工人",
                value:3
            }
        ],
        projectNameList:[
            {
                label:"看守所、戒毒所、拘留所等项目",
                value:0
            },
            {
                label:"SDP零信任项目",
                value:1
            },
            {
                label:"动态应用安全防护系统BSG",
                value:2
            },
            {
                label:"云上贵州项目",
                value:3
            },
            {
                label:"红花街道h5项目",
                value:4
            },
            {
                label:"温州市党政机关信息化项目",
                value:5
            },
            {
                label:"U创办公管理系统",
                value:6
            },
            {
                label:"U创办公小程序项目",
                value:7
            }
        ],
        projectOwnList:[
            {
                name:"南京冠霆智能科技有限公司",
                id:1,
                children:[
                    {
                        name:"看守所项目",
                        id:11
                    },
                    {
                        name:"拘留所项目",
                        id:12
                    },
                    {
                        name:"戒毒所项目",
                        id:13
                    },
                    {
                        name:"安康医院项目",
                        id:14
                    }
                ]
            },
            {
                name:"亚信安全有限公司",
                id:2,
                children:[
                    {
                        name:"亚信智网有限公司",
                        id:21,
                        children:[
                            {
                                name:"SDP零信任项目",
                                id:211
                            },
                            {
                                name:"动态应用安全防护系统BSG",
                                id:212
                            }
                        ]
                    }
                ]
            },
            {
                name:"苏软科技（南京）有限公司",
                id:3,
                children:[
                    {
                        name:"云上贵州项目",
                        id:31
                    },
                    {
                        name:"红花街道h5项目",
                        id:32
                    },
                    {
                        name:"温州市党政机关信息化项目",
                        id:33
                    }
                ]
            },
            {
                name:"南京联创智慧城市科技有限公司",
                id:4,
                children:[
                    {
                        name:"U创办公管理系统",
                        id:41
                    },
                    {
                        name:"U创办公小程序",
                        id:42
                    }
                ]
            }
        ]
    },
    buttonConfig:[
        {
            btnName:"查询",
            btnType:"primary",
            btnSize:"default",
            formRefName:searchConfigRef,
            btnClick:(formRef)=>{
                // console.log(formRef);
                console.log(searchConfig.submitData);
            }
        },
        {
            btnName:"重置",
            btnType:"default",
            btnSize:"default",
            formRefName:searchConfigRef,
            btnClick:(formRef)=>{
                console.log(formRef);
                formRef.resetSearchData();
            }
        }
    ],
    submitData:{
        name:"",
        identity:"",
        birthday:"",
        production:"",
        workInterval:"",
        projectName:"",
        projectOwn:""
    }
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 0 && columnIndex === 0) ||
            //     (rowIndex === 5 && columnIndex === 0) ||
            //     (rowIndex === 38 && columnIndex === 0) ||
            //     (rowIndex === 40 && columnIndex === 0) ||
            //     (rowIndex === 41 && columnIndex === 0) ||
            //     (rowIndex === 42 && columnIndex === 0) ||
            //     (rowIndex === 49 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:100
        }
    ],
    tableData:[
        {
            attrName:"elFormConfig",
            attrType:"object",
            description:"el-form标签元素上的相关配置",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"labelPosition",
                    attrType:"string",
                    description:"label标签的对齐方式",
                    valuable:"'left' | 'right' | 'top'",
                    default:"right",
                },
                {
                    attrName:"labelSuffix",
                    attrType:"string/number",
                    description:"label标签的后缀",
                    valuable:"-",
                    default:"'：'",
                },
                {
                    attrName:"size",
                    attrType:"string",
                    description:"表单内组件的尺寸",
                    valuable:"'' | 'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"el-form的自定义类名",
                    valuable:"-",
                    default:"-",
                }
            ]
        },
        {
            attrName:"itemConfig",
            attrType:"array",
            description:"表单内每个组件的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"labelName",
                    attrType:"string",
                    description:"label名称",
                    valuable:"-",
                    default:"默认名称",
                },
                {
                    attrName:"dataName",
                    attrType:"string",
                    description:"对应后台的数据字段名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"isHide",
                    attrType:"boolean",
                    description:"是否隐藏该表单项",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"hideLabel",
                    attrType:"boolean",
                    description:"是否隐藏label字段",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"type",
                    attrType:"string",
                    description:"表单组件类型",
                    valuable:"'input' | 'select' | 'cascader' | 'date' | 'slot'",
                    default:"input",
                },
                {
                    attrName:"inputType",
                    attrType:"string",
                    description:"input的类型，当且仅当type=input时生效",
                    valuable:"'text' | 'number'",
                    default:"text",
                },
                {
                    attrName:"clearable",
                    attrType:"boolean",
                    description:"是否显示可以一键清空按钮",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"prefixIcon",
                    attrType:"string",
                    description:"输入框前置内置图标，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"prefixSlotName",
                    attrType:"string",
                    description:"输入框前置内置图标插槽名称，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"suffixIcon",
                    attrType:"string",
                    description:"输入框后置内置图标，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"suffixSlotName",
                    attrType:"string",
                    description:"输入框后置内置图标插槽名称，当且仅当type=input时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"dataListName",
                    attrType:"string",
                    description:"下拉数据名称对应selectLists中属性名，当type=select、cascader、checkbox时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"multiple",
                    attrType:"boolean",
                    description:"是否可以多选，当type=select、checkbox时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"collapseTags",
                    attrType:"boolean",
                    description:"多选时是否将选中值按文字的形式展示，当type=select时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"filterable",
                    attrType:"boolean",
                    description:"是否可搜索，当type=select时生效",
                    valuable:"true/false",
                    default:"true"
                },
                {
                    attrName:"cascaderProps",
                    attrType:"object",
                    description:"配置级联选择器的选项，具体的配置参数详见element官网文档，当type=cascader时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"customLabelName",
                    attrType:"string",
                    description:"下拉选项中自定义label对应字段值，当type=select、checkbox时生效",
                    valuable:"-",
                    default:"label"
                },
                {
                    attrName:"customValueName",
                    attrType:"string",
                    description:"下拉选项中自定义value对应字段值，当type=select、checkbox时生效",
                    valuable:"-",
                    default:"value"
                },
                {
                    attrName:"dateType",
                    attrType:"string",
                    description:"时间选择器类型，当type=date时生效",
                    valuable:"'year' | 'years' | 'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'",
                    default:"date"
                },
                {
                    attrName:"defaultTime",
                    attrType:"Date/[Date,Date]",
                    description:"选择日期后的默认时间值，默认8点半，当type=date时生效",
                    valuable:"-",
                    default:"new Date(2000,1,1,8,30,0)"
                },
                {
                    attrName:"disabledDate",
                    attrType:"function",
                    description:"设置禁用日期的方法，一般要配合日期组件的calendar-change事件，当且仅当type=date时生效",
                    valuable:"(item,date)=>{}",
                    default:"-"
                },
                {
                    attrName:"format",
                    attrType:"string",
                    description:"显示在输入框中的格式化时间设置，当type=date时生效",
                    valuable:"-",
                    default:"YYYY-MM-DD HH:mm:ss"
                },
                {
                    attrName:"valueFormat",
                    attrType:"string",
                    description:"传给后台的格式化时间设置，当type=date时生效",
                    valuable:"-",
                    default:"YYYY-MM-DD HH:mm:ss"
                },
                {
                    attrName:"startPlaceholder",
                    attrType:"string",
                    description:"日期开始提示语，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"endPlaceholder",
                    attrType:"string",
                    description:"日期结束提示语，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"rangeSeparator",
                    attrType:"string",
                    description:"时间选择器的范围分隔符，当type=date且dateType=***range时生效",
                    valuable:"-",
                    default:"至"
                },
                {
                    attrName:"width",
                    attrType:"number",
                    description:"表单每项组件的宽度",
                    valuable:"-",
                    default:150
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"表单每项组件即el-form-item的自定义类名",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"itemStyle",
                    attrType:"string",
                    description:"表单每项组件即el-form-item的自定义样式",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"disabled",
                    attrType:"boolean",
                    description:"是否禁用，当type='input' | 'select' | 'cascader' | 'date'时生效",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"slotName",
                    attrType:"string",
                    description:"slot具名插槽名称，当type=slot时生效",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"placeholder",
                    attrType:"string",
                    description:"表单占位符提示语",
                    valuable:"-",
                    default:"-"
                }
            ]
        },
        {
            attrName:"moreConfig",
            attrType:"object",
            description:"更多配置项扩展",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"isShowMore",
                    attrType:"boolean",
                    description:"是否显示展开收缩功能",
                    valuable:"true/false",
                    default:"false",
                }
            ]
        },
        {
            attrName:"moreItemConfig",
            attrType:"array",
            description:"展开时搜索表单配置项，同itemConfig一致",
            valuable:"-",
            default:"-",
        },
        {
            attrName:"selectLists",
            attrType:"object",
            description:"下拉数据集，当type=select、cascader时其内属性名须对应dataListName的值",
            valuable:"-",
            default:"-",
        },
        {
            attrName:"buttonConfig",
            attrType:"array",
            description:"表单底部操作提交按钮相关配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"btnName",
                    attrType:"string",
                    description:"按钮名称",
                    valuable:"-",
                    default:"按钮",
                },
                {
                    attrName:"btnType",
                    attrType:"string",
                    description:"按钮名称，旧版本为type",
                    valuable:"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
                    default:"default",
                },
                {
                    attrName:"btnSize",
                    attrType:"string",
                    description:"按钮尺寸，旧版本为size",
                    valuable:"'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"按钮的自定义类名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"formRefName",
                    attrType:"DOM",
                    description:"表单元素的DOM",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"btnClick",
                    attrType:"function",
                    description:"按钮的点击事件，旧版本click",
                    valuable:"(row,item,scope,optItem)=>{}",
                    default:"-",
                }
            ]
        },
        {
            attrName:"submitData",
            attrType:"object",
            description:"提交到后台的数据集",
            valuable:"-",
            default:"-",
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"-",
            eventType:"function",
            eventValue:"item,value|event|undefined,undefined|ref",
            description:"每个itemConfig表单元素的change、blur、clear等事件，配置在itemConfig中，事件名就是他们的属性名，如change"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"resetSearchData",
            exposeType:"function",
            exposeValue:"-",
            description:"对整个表单的内容进行重置"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const slotsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"插槽名",
            prop:"slotName",
            type:"text",
            width:120
        },
        {
            label:"数据值",
            prop:"slotData",
            type:"text",
            width:180
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            slotName:"-",
            slotData:"data:{scope,item}",
            description:"设置itemConfig配置项中的type为slot时即可使用，用于需要对元素某项进行特殊处理的需求，其中设置的slotName属性值就是该插槽名"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
